<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>仓库货物管理系统</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
	</head>
	<body class="layui-layout-body ">
		<form action="/web/index">
			<div class="layui-layout layui-layout-admin ">
				<div class="layui-header layui-bg-blue">
					<div class="layui-logo">
						<img src="./image/xiaohui2.jpg" style="width: auto;height: auto;">
					</div>

					<!-- 头部区域（可配合layui已有的水平导航） -->

					<ul class="layui-nav layui-layout-left">
						<li class="layui-nav-item layui-this"><a href="index.html">库存管理</a></li>
						<li class="layui-nav-item"><a href="manage.html">入库管理</a></li>
						<li class="layui-nav-item"><a href="chuku.html">出库管理</a></li>
						<li class="layui-nav-item">
							<a href="javascript:;">货物信息查询</a>
							<dl class="layui-nav-child">
								<dd><a href="">货物类型</a></dd>
								<dd><a href="">报表统计</a></dd>
								<dd><a href="">订单信息</a></dd>
							</dl>
						</li>
					</ul>
					
					<ul class="layui-nav layui-layout-right">
						<li class="layui-nav-item">
							<a href="javascript:;">你好，<span th:text="${username}" />
							</a>
							<dl class="layui-nav-child">
								<dd><a href="information.html">基本资料</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="/web/login">退出</a></li>
					</ul>
				</div>

				<div class="layui-side layui-bg-blue ">
					<div>仓</div>
					<div>库</div>
					<div>货</div>
					<div>物</div>
					<div>管</div>
					<div>理</div>
					<div>系</div>
					<div>统</div>
				</div>

				<div class="layui-body">
					<!-- 内容主体区域 -->
					<div style="margin-left: 0.625rem;">
						<table class="layui-table" lay-data="{width: 1060, height:330, url:'/demo/table/user/', page:true, id:'idTest'}" lay-filter="demo">
						  <thead>
						    <tr>
						      <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
						      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
						      <th lay-data="{field:'username', width:110}">货物名称</th>
						      <th lay-data="{field:'sex', width:110}">货物类型</th>
						      <th lay-data="{field:'sign', width:80}">单位</th>
						      <th lay-data="{field:'experience', width:80, sort: true}">规格</th>
						      <th lay-data="{field:'classify', width:80}">数量</th>
						      <th lay-data="{field:'wealth', width:80, sort: true}">单价</th>
						      <th lay-data="{field:'score', width:110, sort: true, fixed: 'right'}">金额</th>
							  <th lay-data="{field:'score', width:110, sort: true, fixed: 'right'}">重量</th>
						      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
						    </tr>
						  </thead>
						</table>
						 
						<script type="text/html" id="barDemo">
						  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
						  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>
					</div>
				</div>

				<div class="layui-footer">
					<!-- 底部固定区域 -->
					© 仓库货物管理系统
				</div>
			</div>

			<script src="./layui/layui.js" charset="utf-8"></script>
			<script>
				//JavaScript代码区域
				layui.use('element', function() {
					var element = layui.element;

				});
				layui.use('table', function(){
				  var table = layui.table;
				  //监听表格复选框选择
				  table.on('checkbox(demo)', function(obj){
				    console.log(obj)
				  });
				  //监听工具条
				  table.on('tool(demo)', function(obj){
				    var data = obj.data;
				    if(obj.event === 'detail'){
				      layer.msg('ID：'+ data.id + ' 的查看操作');
				    } else if(obj.event === 'del'){
				      layer.confirm('真的删除行么', function(index){
				        obj.del();
				        layer.close(index);
				      });
				    } else if(obj.event === 'edit'){
				      layer.alert('编辑行：<br>'+ JSON.stringify(data))
				    }
				  });
				  
				  var $ = layui.$, active = {
				    getCheckData: function(){ //获取选中数据
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.alert(JSON.stringify(data));
				    }
				    ,getCheckLength: function(){ //获取选中数目
				      var checkStatus = table.checkStatus('idTest')
				      ,data = checkStatus.data;
				      layer.msg('选中了：'+ data.length + ' 个');
				    }
				    ,isAll: function(){ //验证是否全选
				      var checkStatus = table.checkStatus('idTest');
				      layer.msg(checkStatus.isAll ? '全选': '未全选')
				    }
				  };
				  
				  $('.demoTable .layui-btn').on('click', function(){
				    var type = $(this).data('type');
				    active[type] ? active[type].call(this) : '';
				  });
				});
			</script>
			<script type="text/javascript" src="./layui/layui.all.js"></script>
			<script type="text/javascript"></script>
		</form>
	</body>
</html>
